<template>
    <div>
        <div class="weGame-title">排行榜</div>
        <div class="weGame-rank">
            <div>
                <div class="weGame-rank-items" :key="item.game_id" v-for="(item) in list">
                    <div v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-title">
                        火爆新品
                    </div>
                    <div class="weGame-rank-items-div">
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-bar' : 'weGame-rank-items-div-header']" class="">
                            <img v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-div-bar-bg" :src="item.poster_url_h">
                            <div v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-div-bar-ov"></div>
                            <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-index' : 'weGame-rank-items-div-order']">
                                {{item.latest_purchase_rank}}
                            </div>
                        </div>
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-super' : 'weGame-rank-items-div-img']"> <img :src="item.poster_url_h" alt=""> </div>
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-text' : 'weGame-rank-items-div-desc']">
                            <div>{{item.game_name}}</div>
                            <div>免费开玩</div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="weGame-rank-items" :key="item.game_id" v-for="(item) in list">
                    <div v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-title">
                        火爆新品
                    </div>
                    <div class="weGame-rank-items-div">
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-bar' : 'weGame-rank-items-div-header']" class="">
                            <img v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-div-bar-bg" :src="item.poster_url_h">
                            <div v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-div-bar-ov"></div>
                            <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-index' : 'weGame-rank-items-div-order']">
                                {{item.latest_purchase_rank}}
                            </div>
                        </div>
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-super' : 'weGame-rank-items-div-img']"> <img :src="item.poster_url_h" alt=""> </div>
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-text' : 'weGame-rank-items-div-desc']">
                            <div>{{item.game_name}}</div>
                            <div>免费开玩</div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="weGame-rank-items" :key="item.game_id" v-for="(item) in list">
                    <div v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-title">
                        火爆新品
                    </div>
                    <div class="weGame-rank-items-div">
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-bar' : 'weGame-rank-items-div-header']" class="">
                            <img v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-div-bar-bg" :src="item.poster_url_h">
                            <div v-if="item.latest_purchase_rank == 1" class="weGame-rank-items-div-bar-ov"></div>
                            <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-index' : 'weGame-rank-items-div-order']">
                                {{item.latest_purchase_rank}}
                            </div>
                        </div>
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-super' : 'weGame-rank-items-div-img']"> <img :src="item.poster_url_h" alt=""> </div>
                        <div :class="[item.latest_purchase_rank == 1 ? 'weGame-rank-items-div-text' : 'weGame-rank-items-div-desc']">
                            <div>{{item.game_name}}</div>
                            <div>免费开玩</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { getRankList } from "@/server/api";
import { defineComponent, reactive, onMounted } from "vue";
export default defineComponent({
    setup() {
        const list = reactive([]);
        const getlist = async () => {
            const data = await getRankList();
            list.push(...(data?.items ?? []));
            console.log(data, 2);
        };

        onMounted(() => {
            getlist();
        });
        return {
            list,
        };
    },
});
</script>

<style lang="less" scoped>
.weGame-rank {
    display: grid;
    grid-template-columns: auto auto auto;
    &-items {
        width: 320px;
        &-title {
            height: 55px;
            background: #fff;
            display: flex;
            align-items: center;
            font-size: 18px;
            padding-left: 10px;
        }
        &-div {
            position: relative;
            background: #fff;
            display: flex;
            align-items: center;
            &::after {
                border-bottom: 2px solid #e4e4e4;
                content: "";
                position: absolute;
                bottom: -1px;
                left: 34px;
                right: 0;
            }
            &-img {
                width: 92px;
                height: 54px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 6px;
                }
            }
            &-super {
                position: absolute;
                left: 34px;
                img {
                    width: 92px;
                    height: 54px;
                    border-radius: 6px;
                }
            }
            &-text {
                position: absolute;
                left: calc(44px + 92px);
                color: white;
                z-index: 3;
            }
            &-desc {
                padding-left: 10px;
                &:last-child {
                    color: #757575;
                }
            }
            &-index {
                height: 34px;
                width: 34px;
                text-align: center;
                position: absolute;
                color: white;
                font-size: 20px;
                z-index: 3;
            }
            &-order {
                display: flex;
                align-items: center;
                height: 34px;
                width: 34px;
                justify-content: center;
                font-weight: 700;
            }
            &-header {
                position: relative;
                height: 80px;
                opacity: 0.8;
                display: flex;
                align-items: center;
                overflow: hidden;
            }
            &-bar {
                position: relative;
                height: 80px;
                opacity: 0.8;
                display: flex;
                align-items: center;
                overflow: hidden;
                width: 100%;
                &-bg {
                    width: 100%;
                    height: 100%;
                    filter: blur(3px);
                    object-fit: cover;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    left: 0;
                }
                &-ov {
                    position: absolute;
                    z-index: 2;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background: rgba(23, 54, 59, 0.9);
                }
            }
        }
    }
}
</style>